<template lang="html">
  <div class="upload-picture">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="首页" name="first">

      </el-tab-pane>
      <el-tab-pane label="关于云耐" name="second">
        <el-dialog v-model="dialogVisible" size="tiny">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-upload
          class="upload-demo"
          multiple
          list-type="picture-card"
          action="https://api.zgwyzxw.cn/files"
          :headers="headers"
          :data="uploadData"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          :on-success="handleSuccess"
          ref="upload">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="服务项目" name="third">服务项目</el-tab-pane>
      <el-tab-pane label="案例展示" name="fourth">案例展示</el-tab-pane>
      <el-tab-pane label="招标服务" name="fourth">招标服务</el-tab-pane>
      <el-tab-pane label="动态资讯" name="fourth">动态资讯</el-tab-pane>
      <el-tab-pane label="联系我们" name="fourth">联系我们</el-tab-pane>
    </el-tabs>

    <!-- <div class="btn-wrapper">
      <el-button-group>
        <el-button type="primary" icon="arrow-left" @click="prev">上一页</el-button>
        <el-button type="primary" @click="next">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div> -->


  </div>
</template>

<script>
import {
  loadToken
} from 'common/js/cache'

import {
  getPictures,
  delPicture
} from 'api/uploadPicture'

import {
  mapGetters,
  mapActions
} from 'vuex'

// import {
//   pagination
// } from 'common/js/page'
//
import {
  PAGE_SIZE
} from 'api/config'

export default {
  name: 'upload-picture',
  data() {
    return {
      activeName: 'first',
      file: [],
      dialogImageUrl: '',
      dialogVisible: false,
      uploadId: null,
      images: [], // 当前展示的数据
      nowPage: 0, // 数据的当前页
      dataLength: 0, // 当前获取数据的总页数
      notEmpty: true, // 是否是整数页
      lastPictureKey: '', // 最后一项的key
      allPictures: [], // 第一次请求的所有图片数据,
      uploadData: {
        prefix: 'article/sfsdf/'
      }
    }
  },
  created() {
    this._getPictures(this.lastPictureKey)
  },
  computed: {
    headers() {
      return {
        'Authorization': `Bearer ${loadToken()}\n`
      }
    },
    ...mapGetters([
      'pictures'
    ])
  },
  methods: {
    _getPictures(lastPictureKey) {
      getPictures(loadToken()).then((res) => {
        this.initData(res.data)
      })
    },
    initData(data) {
      if (!data.length) return
      if (this.allPictures.length) {
        let arr = []
        data.forEach((item) => {
          arr.push(item)
          this.allPictures = arr
        })
      } else {
        this.allPictures = data
      }
      this.setPictures(this.allPictures)
      let length = this.allPictures.length
      this.notEmpty = length % PAGE_SIZE !== 0
      this.dataLength = Math.ceil(length / PAGE_SIZE)
      this.images = this.allPictures.slice(this.nowPage * PAGE_SIZE, (this.nowPage + 1) * PAGE_SIZE).reverse()
      this.lastPictureKey = this.allPictures[this.allPictures.length - 1].key
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleSuccess(file) {
      this._getPictures('')
      this.$refs.upload.clearFiles()
    },
    delPicture(event) {
      let key = event.path[3].getAttribute('data-key')
      console.log(key)
      delPicture(key, loadToken()).then((res) => {
        console.log(res)
      })
    },
    next() {
      this.nowPage = this.nowPage + 1
      if (this.nowPage === (this.dataLength - 2) && this.notEmpty || this.nowPage === (this.dataLength - 1) && !this.notEmpty) {
        this._getPictures(this.lastPictureKey)
      }

      if (this.nowPage >= this.dataLength) this.nowPage = this.dataLength - 1
      this.images = this.allPictures.slice(this.nowPage * PAGE_SIZE, (this.nowPage + 1) * PAGE_SIZE)
    },
    prev() {
      this.nowPage = this.nowPage - 1
      if (this.nowPage <= 0) this.nowPage = 0
      this.images = this.allPictures.slice(this.nowPage * PAGE_SIZE, (this.nowPage + 1) * PAGE_SIZE)
    },
    ...mapActions([
      'setPictures'
    ])
  }
}
</script>

<style lang="scss">
@import "~common/sass/variable.scss";
$content-width: 950px;
.upload-picture {
    padding: 10px 10px 0 20px;
    .el-tab-pane {
        border: 1px solid $border-color;
        margin-bottom: 15px;
        .img-container {
            width: 100%;
            height: 318px;
            overflow: hidden;
            padding: 10px 10px 0;
        }
    }
}
.el-tabs__content,
.el-tabs__header {
    width: $content-width;
}

.btn-wrapper {
    display: flex;
    width: $content-width;
    justify-content: center;
}
</style>
